import React, { Component } from 'react';
import './index.less';
import { Layout, Menu, Icon, Button, Tree, Input, Row, Col, Modal, notification, message } from 'antd';
import MenuManagerForm from './MenuFrom/index.jsx';
import MenuManagerTable from './MenuTable/index.jsx';
import MenuTree from './Tree/index.jsx';
import axios from 'axios';


import { connect } from 'react-redux';
import store from '../../redux/index';

const { Header, Sider, Content } = Layout;
const ButtonGroup = Button.Group;
const confirm = Modal.confirm;

class MenuManager extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      data: {
        Num: '',
        parentID: '',
        parentIdOff: false
      },
      MenuOff: ''
    };
  }

  // 提示框
  openNotification = (type, Message) => {
    notification[type]({
      message: Message,
    });
  };
  // 菜单删除弹框
  showDeleteConfirm = () => {
    const _this = this;
    confirm({
      title: '删除',
      content: '此操作将永久删除，是否继续？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        var parentid = store.getState().changeBtnsStatus.MenuData.parentId;
        var ID = store.getState().changeBtnsStatus.MenuData.id;
        if (parentid != '' && ID != '') {
          _this.deleteMenu(ID);
        } else {
          _this.openNotification('warning', '请选择菜单项');
        }

        // console.log(store.getState().changeBtnsStatus.MenuData);

      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  // 删除菜单
  deleteMenu = (ID) => {
    const _this = this;
    const Token = sessionStorage.getItem('token');
    axios.delete('/api/admin/menu/' + ID, {
      headers: {
        'Content-Type': 'application/json',
        Authorization: Token
      }
    })
      .then(function(response) {
        if (response.data.status == 200) {
          _this.updataMenu('deleteOk');
          _this.openNotification('success', '成功', '删除成功');

        }

        // _this.clearValue(ID);

      })
      .catch(function(error) {
        console.log(error);
        message.error('服务器开小差啦，请重试！');
      });
  }

  // 更新左侧菜单
  updataMenu = (MenuOff) => {
    this.setState({
      MenuOff: MenuOff
    });
  }

  // 获取单个菜单数据
  getMenuData = (ID) => {
    const _this = this;
    const Token = sessionStorage.getItem('token');
    axios({
      method: 'get',
      url: '/api/admin/menu/' + ID,
      headers: {
        Authorization: Token
      }
    })
      .then(function (response) {
        _this.setState({
          intData: response.data.data
        });

        var storeData = store.getState().changeBtnsStatus.MenuData;
        storeData = {
          attr1: _this.state.intData.attr1,
          code: _this.state.intData.code,
          description: _this.state.intData.description,
          href: _this.state.intData.href,
          icon: _this.state.intData.icon,
          id: _this.state.intData.id,
          order_num: _this.state.intData.order_num,
          parentId: _this.state.intData.parentId,
          path: _this.state.intData.path,
          title: _this.state.intData.title,
          type: _this.state.intData.type,
        };

        store.dispatch({ type: 'changeMenuData', MenuData: storeData });
      })
      .catch(function (error) {
        console.log(error);
        message.error('服务器开小差啦，请重试！');
      });

  }

  // 添加菜单
  addMenu = () => {
    var storeData = store.getState().changeBtnsStatus.MenuData;
    if (this.state.data.Num == '') {
      // console.log("为空");
      storeData.parentId = '-1';
    } else {
      storeData.parentId = this.state.data.Num;
      // console.log("不为空"+this.state.data.Num)
      storeData = {
        attr1: '',
        code: '',
        description: '',
        href: '',
        icon: '',
        id: '',
        order_num: '',
        parentId: this.state.data.Num,
        path: '',
        title: '',
        type: '',
      };
    }
    store.dispatch({ type: 'changeBtnsStatus', BtnsStatus: false });
    store.dispatch({ type: 'changeMenuData', MenuData: storeData });
    store.dispatch({ type: 'changeBtnsUpate', BtnsUpate: false });
    store.dispatch({ type: 'changeBtnsShow', BtnsShowStatus: false });
  }

  // 编辑菜单
  editMenu = () => {
    // console.log('编辑'+this.state.data.Num);
    if (this.state.data.Num != '') {
      this.getMenuData(this.state.data.Num);
      store.dispatch({ type: 'changeBtnsStatus', BtnsStatus: false });
      store.dispatch({ type: 'changeBtnsUpate', BtnsUpate: true });
      store.dispatch({ type: 'changeBtnsShow', BtnsShowStatus: true });
      store.dispatch({ type: 'DeleteValue', DeleteValue: false });
    } else {
      this.openNotification('warning', '请选择菜单');
    }


  }
  // 获取子级id
  takeID = (ID) => {
    // console.log("---------id:"+ID);
    var oData = this.state.data;
    oData.Num = ID;
    this.setState({
      data: oData
    });

  }
  render() {
    return (
      <div className="MenuManagerBox">
        <div className="operation">
          <ButtonGroup>
            <Button type="primary" onClick={this.addMenu}><Icon type="plus" />添加</Button>
            <Button type="primary" onClick={this.editMenu}><Icon type="edit" />编辑</Button>
            <Button type="primary" onClick={this.showDeleteConfirm}><Icon type="delete" />删除</Button>
          </ButtonGroup>
        </div>
        <div className="MenuManagerCt">
          <Row>
            <Col span={6}>
              <div className="TreeBox">
                <MenuTree takeID={this.takeID} MenuOff={this.state.MenuOff} getMenuData={this.getMenuData} />
              </div>
            </Col>
            <Col span={18}>
              <div className="MenuManagerFrom">
                <MenuManagerForm ID={this.state.data.Num} oData={this.state.data} updataMenu={this.updataMenu} />
              </div>
              <div className="MenuTable">
                <MenuManagerTable ID={this.state.data.Num} />
              </div>
            </Col>
          </Row>
        </div>
      </div>

    );
  }
}

// export default MenuManager;

export default connect((state) => {
  return { ...state };
})(MenuManager);
